<template>
	<view>
		<view class="choose-wrapper d-flex a-center p-fixed">
			<view class="span-15 d-flex j-sa a-center">
				<view class="d-flex a-center" v-for="(item,index) in screen.list" :key="index"
					@click="changeTab(index)">
					<view :class="screen.currentIndex==index?'main-text-color':''">
						{{item.name}}
					</view>
					<view class="">
						<view class="iconfont icon-sort-up-full line-h0" :class="item.status==1?'main-text-color':''">
						</view>
						<view class="iconfont icon-sort-down-full line-h0" :class="item.status==2?'main-text-color':''">
						</view>
					</view>
				</view>
			</view>
			<view class="span-5 text-center" @click="setChoose">
				筛选
			</view>
		</view>
		<view>
			<view class="" v-show="isShow">
				<image src="../../static/images/load.gif" mode="" style="max-width:750rpx;display: block;margin:0 auto;"></image>
			</view>
			<view class="" v-show="!isShow">
				<template v-if="searchList.length>0">
					<searchcon-list v-for="(item,s) in searchList" :key="s" :item="item"></searchcon-list>
					<view class="text-center text-muted my-3 pb-5">
						{{loadmore}}
					</view>
				</template>
				<template v-else>
					<view class="text-center text-muted my-2">暂无数据</view>
				</template>
			</view>
		</view>
		<uni-drawer ref="showRight" mode="right" :mask-click="true" width="280">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="mt-5 pt-3">
					<color-tag v-for="(item,c) in label.list" :key="c" :item="item" :color="false"
						:bool="label.selected==c" @click="changeBtn(c)"></color-tag>
				</view>
			</scroll-view>

		</uni-drawer>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		computed
	} from 'vue'
	import {
		getChoose
	} from '../../api/index.js'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	var searchList = ref([])
	var showRight = ref()
	var list = ref([])
	var loadmore = ref('加载更多…')
	var isShow = ref(true)
	var screen = ref({
		currentIndex: 0,
		list: [{
				name: '综合',
				status: 1,
				key: 'all'
			},
			{
				name: '销量',
				status: 0,
				key: 'sale_count'
			},
			{
				name: '价格',
				status: 0,
				key: 'min_price'
			}
		]
	})
	var label = ref({
		selected: 0,
		list: [{
				name: '不限',
				rule: false,
				value: false

			},
			{
				name: '100-200',
				rule: 'between',
				value: '100,200'

			},
			{
				name: '200-300',
				rule: 'between',
				value: '200,300'

			},
			{
				name: '300-400',
				rule: 'between',
				value: '300,400'

			},
			{
				name: '400以上',
				rule: '>',
				value: '400'

			}
		]
	})
	let title = ref('')
	let page = ref(1)
	//打开抽屉
	const setChoose = () => {
		showRight.value.open();
	}
	// const closeDrawer = ()=>{
	// 	showRight.value.close();
	// }
	//筛选按钮
	const changeBtn = (c) => {
		label.value.selected = c
		getchoose()
	}
	//计算出all sale_count  min_price三个动态变化
	const options = computed(() => {
		var obj = screen.value.list[screen.value.currentIndex];
		let value = obj.status == 1 ? 'asc' : 'desc'
		return {
			[obj.key]: value
		}
	})
	const getCondition = () => {
		var obj = label.value.list[label.value.selected];
		if (obj.rule && obj.value) {
			return {
				price: `${obj.rule},${obj.value}`
			}
		}

	}
	//下拉刷新
	onPullDownRefresh(() => {
		getchoose(true, () => {
			uni.showToast({
				title: '刷新成功'
			})
		})
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	//上拉加载
	onReachBottom(() => {
		console.log('触底了');
		page.value++;
		loadmore.value = '加载中…'
		getchoose(false,()=>{
			uni.showToast({
				title: '加载成功'
			})
		})
	})
	const changeTab = (index) => {
		//索引不变
		let oldIndex = screen.value.currentIndex;
		//老的状态
		let oldItem = screen.value.list[oldIndex];
		if (screen.value.currentIndex == index) {
			oldItem.status = oldItem.status == 1 ? 2 : 1
			getchoose()
			return;
		} else {
			//索引变化 新的状态
			let newItem = screen.value.list[index];
			oldItem.status = 0;
			newItem.status = 1;
			screen.value.currentIndex = index;
			getchoose()
			return;
		}
	}

	onLoad((e) => {
		console.log('eeeee', e);
		title.value = e.key

	})
	const getchoose = (refesh = true, callback = false) => {
		page.value = refesh ? 1 : page.value
		getChoose({
			title: title.value,
			page: page.value,
			...options.value,
			...getCondition()
		}).then(res => {
			console.log('ressssssss', res);
			isShow.value = false;
			list.value = refesh ? [...res.data] : [...res.data, ...list.value]
			searchList.value = formatter(list.value)
			console.log('searchList.value', searchList.value);
			loadmore.value = res.data.length < 6 ? '没有更多了…' : '加载更多…'
		})
		if (typeof callback == 'function') {
			callback()
		}
	}
	onMounted(() => {
		getchoose()
	})
	const formatter = (res) => {
		return res.map(item => {
			let goodnum = (item.comments_good_count / item.comments_count) * 100
			return {
				titlepic: item.cover,
				title: item.title,
				desc: item.desc,
				pprice: item.min_price,
				comment_num: item.comments_count,
				good_num: goodnum.toFixed(2) + '%'
			}
		})
	}
</script>
<style scoped lang="scss">
	.choose-wrapper {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
	}

	.p-fixed {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 9999;
	}
</style>